<template>
  <div
    class="app-container"
    v-loading="loading"
    element-loading-text="拼命加载中"
    element-loading-spinner="el-icon-loading"
    element-loading-background="rgba(0, 0, 0, 0.8)"
  >
    <el-descriptions title="单据信息" :column="1" class="out-border">
      <template slot="extra">
        <el-tag
          :type="
            info.auditResultCode == 'AUDITING'
              ? 'warning'
              : info.auditResultCode == 'REFUSE'
              ? 'danger'
              : 'success'
          "
        >{{ info.auditResultCode | filterAuditResultCode }}</el-tag>
      </template>
      <el-descriptions-item>
        <template slot="label">申请单id</template>
        {{ auditId }}
      </el-descriptions-item>
      <el-descriptions-item>
        <template slot="label">申请时间</template>
        {{ info.createTime }}
      </el-descriptions-item>
      <el-descriptions-item v-if="info.auditResultCode != 'AUDITING'">
        <template slot="label">{{ `审核${info.auditResultCode=='REFUSE'? "拒绝" : "通过"}时间` }}</template>
        {{ info.auditTime }}
      </el-descriptions-item>
      <el-descriptions-item v-if="info.auditResultCode == 'REFUSE'">
        <template slot="label">拒绝原因</template>
        {{ info.auditResultMessage }}
      </el-descriptions-item>
    </el-descriptions>
    <br />
    <el-descriptions title="个人资料" :column="1" class="out-border">
      <el-descriptions-item>
        <template slot="label">姓名</template>
        {{ info.workerName }}
      </el-descriptions-item>
      <el-descriptions-item>
        <template slot="label">手机号</template>
        {{ info.userPhoneNumber }}
      </el-descriptions-item>
      <el-descriptions-item>
        <template slot="label">身份证号</template>
        {{ info.identityCardNumber }}
      </el-descriptions-item>
      <el-descriptions-item>
        <template slot="label">银行卡号</template>
        {{ info.bankCardNumber }}
      </el-descriptions-item>
      <el-descriptions-item>
        <template slot="label">身份证正反面照片</template>
        <el-row>
          <el-image
            v-if="info && info.identityCardFront"
            class="image"
            :src="info.identityCardFront"
            :preview-src-list="[info.identityCardFront, info.identityCardBack]"
          ></el-image>
          <el-image
            v-if="info && info.identityCardBack"
            class="image"
            :src="info.identityCardBack"
            :preview-src-list="[info.identityCardBack, info.identityCardFront]"
          ></el-image>
        </el-row>
      </el-descriptions-item>
      <el-descriptions-item>
        <template slot="label">学习证明资料/相关经验证明资料</template>
        <el-row v-if="info && info.information">
          <el-image
            class="image"
            v-for="(item, index) in info.information.split(',')"
            :key="index"
            :src="item"
            :preview-src-list="info.information.split(',')"
          ></el-image>
        </el-row>
      </el-descriptions-item>
    </el-descriptions>
    <br />
    <el-descriptions title="服务信息" :column="1" class="out-border">
      <el-descriptions-item class="row-block">
        <template slot="label">是否有实体店</template>
        {{ info && info.storesFlag === "YES" ? "是" : "否" }}
      </el-descriptions-item>
      <el-descriptions-item v-if="info && info.storesFlag === 'YES'">
        <template slot="label">门头照片</template>
        <el-row>
          <el-image
            class="image"
            v-for="(item, index) in info.storesImageUrl.split(',')"
            :key="index"
            :src="item"
            :preview-src-list="[info.storesImageUrl.split(',')]"
          ></el-image>
        </el-row>
      </el-descriptions-item>
      <el-descriptions-item m v-if="info && info.storesFlag === 'YES'">
        <template slot="label">所在地址</template>
        <div>
          <el-row>{{ info.address }}</el-row>
          <br />
          <el-row>
            <Map :lng="info.addressLongitude" :lat="info.addressLatitude" />
          </el-row>
        </div>
      </el-descriptions-item>
      <el-descriptions-item>
        <template slot="label">重点服务区域</template>
        <div v-for="item in info.importTant" :key="item.id">{{ item.serviceAreaName }}</div>
      </el-descriptions-item>
      <el-descriptions-item>
        <template slot="label">优先服务区域</template>
        <div>
          <div v-for="item in info.precedence" :key="item.id">{{ item.serviceAreaName }}</div>
        </div>
      </el-descriptions-item>
      <el-descriptions-item v-if="info.ordinary.length > 0">
        <template slot="label">普通服务区域</template>
        <div>
          <div v-for="item in info.ordinary" :key="item.id">{{ item.serviceAreaName }}</div>
        </div>
      </el-descriptions-item>
      <el-descriptions-item>
        <template slot="label">服务类目</template>
        <div v-if="info && info.category">
          <el-tag
            style="margin: 0 10px 10px 0"
            v-for="item in info.category"
            :key="item.categoryId"
          >{{ item.categoryName }}</el-tag>
        </div>
      </el-descriptions-item>
    </el-descriptions>
    <br />
    <el-descriptions title="其他" :column="1" class="out-border">
      <el-descriptions-item class="row-block">
        <template slot="label">师傅所属</template>
        {{ config.saasName }}服务商师傅
      </el-descriptions-item>
    </el-descriptions>

    <br />

    <div style="text-align: center; margin-top: 10px" v-if="mode == 'audit'">
      <el-button
        v-if="info.auditResultCode == 'AUDITING'"
        type="danger"
        @click="handleRefuse"
        :loading="loading"
      >拒 绝</el-button>
      <el-button
        v-if="info.auditResultCode == 'AUDITING'"
        type="primary"
        @click="handlePass"
        :loading="loading"
      >同 意</el-button>
    </div>
    <div style="text-align: center; margin-top: 10px" v-else>
      <el-button v-if="['REFUSE', 'PASS'].includes(info.auditResultCode)" @click="handleClose">关 闭</el-button>
    </div>
  </div>
</template>

<script>
import { apiAuditDetail, apiAuditResult } from "@/api/worker.js";
import Map from "@/components/Map/index.vue";
import ChooseMap from "@/components/Map/chooseMap.vue";

export default {
  name: "AuditDetail",

  components: { ChooseMap, Map },
  data() {
    return {
      config:window.config,
      auditId: "",
      loading: false,
      mode: "view",
      info: {
        storesImageUrl: "",
        information: "",
        importTant: [],
        precedence: [],
        ordinary: []
      }
    };
  },
  mounted() {
    try {
      const { auditId, mode } = this.$route.query;
      this.auditId = auditId;
      this.mode = mode;
      this.getData();
    } catch (error) {
      this.$message("丢失主键");
    }
  },
  methods: {
    getData() {
      showLoading();
      apiAuditDetail({ auditId: this.auditId })
        .then(res => {
          this.info = res.data;
          closeLoading();
        })
        .catch(err => {
          closeLoading();
        });
    },
    handleClose() {
      this.$router.back();
    },
    handlePass() {
      this.loading = true;
      apiAuditResult({ auditResultCode: "PASS", auditId: this.auditId })
        .then(res => {
          this.$message({
            type: "success",
            message: "操作成功"
          });
          this.$router.back();
          this.loading = false;
        })
        .catch(err => {
          this.loading = false;
        });
    },
    handleRefuse() {
      this.$prompt("请填写拒绝原因", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        inputValidator: value => {
          if (!value) {
            return "请输入拒绝原因!";
          } else if (value.length > 40) {
            return "最多支持40个字符!";
          } else {
            return true;
          }
        }
      })
        .then(({ value }) => {
          this.loading = true;
          apiAuditResult({
            auditResultCode: "REFUSE",
            auditId: this.auditId,
            auditResultMessage: value
          })
            .then(res => {
              this.$message({
                type: "success",
                message: "操作成功"
              });
              this.$router.back();
              this.loading = false;
            })
            .catch(err => {
              this.loading = false;
            });
        })
        .catch(() => {});
    }
  }
};
</script>
<style scoped lang="scss">
::v-deep .image {
  width: 120px;
  height: 120px;
  margin-right: 10px;
}
::v-deep .row-block {
  flex-direction: column !important;
  display: flex;
}
</style>
